<template>
	<view class="page">
		<view class="discuss">
			<view class="title">{{discussInfo.title}}</view>
			<view class="content">{{discussInfo.content}}</view>
			<view class="related">{{discussInfo.related}}</view>
			<view class="time">{{discussInfo.createTime}}</view>
		</view>

		<view class="divider"></view>
		<discuss-list :discussId="discussInfo.discussId" 
		:total="discussInfo.discussNum" 
		:discussList="discussInfo.discussDetail"
		@refresh="loadData"></discuss-list>
	</view>
</template>

<script>
	import discussList from './fragment/discussList.vue'
	import CourseService from '@/services/course.js'
	const courseService = new CourseService()
	export default {
		components: {
			discussList
		},
		data() {
			return {
				discussId: null,
				discussInfo: {
					discussDetail:[]
				}
			}
		},
		onLoad(query) {
			this.discussId = query.discussId
			this.loadData();
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			uni.$emit('refreshCourse');
			uni.navigateBack()
			return true;
		},
		methods: {
			loadData() {
				const params = {
					discussId: this.discussId
				}
				courseService.discussInfo(params).then(res => {
					if (res.success) {
						this.discussInfo = res.result;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.discuss {
		font-size: 28upx;
		color: #333333;
		padding: 40upx 20upx;
	}

	.divider {
		height: 1px;
		background-color: #F1F1F1;
	}

	.content {
		margin-top: 36upx;
	}

	.related {
		font-size: 24upx;
		color: #999999;
		margin-top: 16upx;
	}

	.time {
		font-size: 24upx;
		color: #999999;
		margin-top: 40upx;
	}
</style>
